
<!DOCTYPE html> 
<html> 
<head> 
    <title>Overlay  Test</title> 
        <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" /> 
        <script src="../../../build/yui/yui-min.js"></script> 
    <style type="text/css"> 
      #results {
                width: 60%;
      }
      .yui3-widget-mask { background: rgba(0,0,0,0.8); }
      .yui3-overlay {
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
      }
      body {
          font-family: sans-serif;
          font-size:12px;
          line-height:18px;
      }

      #desc {
        margin-bottom:20px;
        border-bottom:1px dotted #333;
      }
      #desc span {
        padding:2px;
      }


    </style> 
</head> 
<body class="yui3-skin-sam yui-skin-sam">

<div id="desc">
<h1><code>Y.Plugin.WidgetModal</code> Unit Tests</h1>
<span>These unit tests for <code>Y.Plugin.Modal</code>cover the general use cases. Namely:
<ul>
  <li>Making an overlay modal</li>
  <li>Nested Modality (modal overlay opening a modal overlay)</li>
  <li>Various modal widgets (charts & dial)</li>
  <li>Making sure mask moves around DOM</li>
</ul>

Currently there's not a great way to test to make sure that the modal widget is receiving focus. For this, refer to the manual test at <code>modality.html</code>

</span>
</div>

 <div id="overlayContainer"></div>
<div id="results"></div> 
<script type="text/javascript"> 
 
/* globals YUI */
YUI({
  filter: 'raw'
}).use("overlay", "dial", "charts", "widget-modality", 'test', 'console','dump', function (Y) {
  
    var Assert = Y.Assert, r,
        results = Y.one('#results'), suite,
        overlayCfg = {
            id: 'myOverlay',
            headerContent: 'Demo Overlay',
            bodyContent: 'This is example overlay content',
            footerContent: 'Overlay Footer',
            visible: false,
            height: 200,
            width: 400,
            centered: true,
            plugins: [Y.Plugin.Modal]
        };

        nestedCfg = {
          id: 'nestedOverlay',
          headerContent: 'Nested Overlay',
          bodyContent: 'This is example nestd overlay content',
          footerContent: 'nested overlay Footer',
          visible: false,
          height: 400,
          width: 500,
          centered: true,
          plugins: [Y.Plugin.WidgetModal]
        }


    var modalityTests = new Y.Test.Case({
        name : "Overlay Tests",
        //---------------------------------------------------------------------
        // Test methods - names must begin with "test"
        //---------------------------------------------------------------------
        
        overlay: undefined,
        nested: undefined,
        dial:undefined,
        chart:undefined,

        setUp : function () {
            
            var container = Y.Node.create('<div id="overlayContainer"></div>');
            Y.one('body').appendChild(container);

            this.overlay = new Y.Overlay(overlayCfg);
            this.overlay.plug(Y.Plugin.WidgetModal);
            this.overlay.render('#overlayContainer');
        },
 
        /*
         * Cleans up everything that was created by setUp().
         */
        tearDown : function () {
          Y.one('#overlayContainer').remove();
          if (this.overlay) {
            this.overlay.destroy();
          }
          
          if (this.dial) {
            this.dial.destroy();
          }

          if (this.chart) {
            this.chart.destroy();
          }
          if (this.nested) {
            this.nested.destroy();
          }
          

        },

        //instantiates a basic modal overlay and checks to see that mask is displayed, and zIndex is same
        testDefaultOverlay : function () {
            this.overlay = new Y.Overlay(overlayCfg);
            this.overlay.plug(Y.Plugin.WidgetModal);
            this.overlay.render('#overlayContainer');
            this.overlay.show();

            var mask = Y.one(".yui3-widget-mask");
            var mask_zIndex = parseInt(mask.getStyle('zIndex'));


            Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block");
            Assert.areSame(mask_zIndex, this.overlay.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");

            Assert.areSame(Y.one('#overlayContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM");


            this.overlay.hide();


            Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:none");

            //Assert.areSame(overlayCfg.headerContent, Y.one('#myOverlay .yui3-widget-hd').get('innerHTML'), "Test Header");
            //Assert.areSame(overlayCfg.footerContent, Y.one('#myOverlay .yui3-widget-ft').get('innerHTML'), "Test Footer");
            // A.areSame('block', Y.one('.yui3-overlay-mask').getStyle('display'), "Test Mask");
            //overlay.hide();
            //A.isTrue(Y.one('#myOverlay').hasClass('yui3-ia-widget-modaloverlay-hidden'), "Test Overlay");
            //A.areSame('none', Y.one('.yui3-overlay-mask').getStyle('display'), "Test Mask");
        },


        //creates a bunch of widgets one by one, to make sure the mask moves around as needed
        testMultipleWidgets: function() {

          var containers = Y.Node.create('<div id="dialContainer"></div><div id="chartContainer"></div>');
          Y.one("body").appendChild(containers);
          
          var mask = Y.one('.yui3-widget-mask');
          this.overlay = new Y.Overlay(overlayCfg);
          this.overlay.plug(Y.Plugin.WidgetModal);
          this.overlay.render('#overlayContainer');
          this.overlay.show();


          Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block");
          Assert.areSame(parseInt(mask.getStyle('zIndex')), this.overlay.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
          Assert.areSame(Y.one('#overlayContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM");


          this.overlay.hide();


          this.dial = new Y.Dial({
             min:-220,
             max:220,
             stepsPerRev:100,
             value: 30,
           });

           this.dial.plug(Y.Plugin.Modal);

           this.dial.render('#dialContainer');

           Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when dial is shown");
           Assert.areSame(Y.one('#dialContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Dial");

           this.dial.hide();

           Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when dial is hidden");

           //Charts
           var myDataValues = [ 
                {category:"5/1/2010", values:2000}, 
                {category:"5/2/2010", values:50}, 
                {category:"5/3/2010", values:400}, 
                {category:"5/4/2010", values:200}, 
                {category:"5/5/2010", values:5000}
            ];
           
            this.chart = new Y.Chart({dataProvider:myDataValues});
            this.chart.plug(Y.Plugin.Modal);

            this.chart.render('#chartContainer');

            Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when chart is shown");
            Assert.areSame(Y.one('#chartContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Chart");

            this.chart.hide();

            Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when chart is hidden");

        },


        testNesting: function() {
          
          var mask = Y.one('.yui3-widget-mask');
          var self = this;
          
          //add dom node
          Y.one('body').appendChild(Y.Node.create('<div id="nestedContainer"></div>'));

          //create overlay
          this.overlay = new Y.Overlay(overlayCfg);
          this.overlay.plug(Y.Plugin.WidgetModal);
          this.overlay.render('#overlayContainer');
          this.overlay.show();

          //create nested overlay
          this.overlay.after('render', function() {
            self.nested = new Y.Overlay(overlayCfg);
            self.nested.set('zIndex', 5);
            self.nested.plug(Y.Plugin.WidgetModal);
            self.nested.render('#nestedContainer');
            self.nested.show();


            Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when nested overlay is shown");
            Assert.areSame(Y.one('#nestedContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for nested overlay");
            Assert.areSame(parseInt(mask.getStyle('zIndex')), self.nested.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");

          });
        },


        testPluginOnConfig: function() {
           
           //Charts
           var mask = Y.one(".yui3-widget-mask");
           var myDataValues = [ 
                {category:"5/1/2010", values:2000}, 
                {category:"5/2/2010", values:50}, 
                {category:"5/3/2010", values:400}, 
                {category:"5/4/2010", values:200}, 
                {category:"5/5/2010", values:5000}
            ];
           
            this.chart = new Y.Chart({dataProvider:myDataValues, plugins: [Y.Plugin.Modal]});

            this.chart.render('#chartContainer');

            Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when chart is shown");
            Assert.areSame(Y.one('#chartContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Chart");

            this.chart.hide();

            Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when chart is hidden");
        }
    });
 
    //create the console
    r = new Y.Console({
        newestOnTop : false
    });
 
    r.render('#log');
 
    suite = new Y.Test.Suite("Widget Modality Test Suite");
    suite.add(modalityTests);
 
    Y.Test.Runner.setName("Widget Modality Tests");
    Y.Test.Runner.add(suite);
    Y.Test.Runner.run();
});
</script> 
</body> 
</html> 